<template>
    <div class="font-inter bg-gradient-to-br from-light to-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
        <div class="max-w-4xl w-full mx-auto text-center">
            <div class="relative mb-8">
                <div class="text-[clamp(120px,25vw,200px)] font-bold text-primary/10 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-0">404</div>
                <div class="relative z-10 flex flex-col items-center">
                    <div class="w-32 h-32 bg-primary/10 rounded-full flex items-center justify-center mb-6 animate-float">
                        <i class="fa fa-exclamation-triangle text-[clamp(50px,10vw,80px)] text-primary"></i>
                    </div>
                    <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-dark mb-4 text-shadow">页面不存在</h1>
                    <p class="text-[clamp(1rem,2vw,1.25rem)] text-secondary max-w-2xl mx-auto mb-4">
                        你访问的页面好像去了外太空，可能是链接有误或页面已被移除。
                    </p>
                    <div class="bg-blue-50 border-l-4 border-primary p-4 mb-8 rounded-r-lg max-w-md w-full mx-auto">
                        <p class="text-secondary text-sm">遇到错误了，也可以联系网站运维人员处理</p>
                        <div class="flex items-center mt-2 text-primary">
                            <i class="fa fa-user-circle mr-2"></i>
                            <span>运维人员：快乐天使阿杜</span>
                        </div>
                    </div>
                    <div class="relative group">
                        <div class="absolute inset-0 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 rounded-full blur opacity-70 group-hover:opacity-80 transition-all duration-500 animate-pulse-slow"></div>
                        <router-link :to="{ name: 'Home' }" class="relative inline-flex items-center justify-center px-8 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 btn-wobble group-hover:scale-105">
              <span class="relative z-10 flex items-center">
                <i class="fa fa-rocket mr-2 transform group-hover:rotate-12 transition-transform duration-300"></i>
                返回主页
              </span>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
        <footer class="mt-auto py-6 text-center text-secondary text-sm">
            <p>© 2025 版权所有 | <router-link to="/home" class="text-primary hover:underline">gshnbst.cn</router-link></p>
            <div class="flex justify-center items-center space-x-6 mt-2">
                <a href="https://beian.miit.gov.cn/" target="_blank" class="flex items-center">
                    <p>陇ICP备2024009890号</p>
                </a>
                <a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=62042202000161" target="_blank" class="flex items-center">
                    <img src="../image/beian.png" alt="公安备案图标" class="w-4 h-4 mr-1">
                    <p>甘公网安备 62042202000161号</p>
                </a>
            </div>
        </footer>
    </div>
</template>

<script>
export default {
    name: 'ErrorPage',
    data() {
        return {
            // 可以添加组件状态
        }
    },
    created() {
        // 页面创建时的逻辑
        console.log('404 Error Page Loaded')
    }
}
</script>

<style scoped type="text/tailwindcss">
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .animate-float {
        animation: float 3s ease-in-out infinite;
    }
    .animate-pulse-slow {
        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    .btn-wobble {
        animation: wobble 3s infinite;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes wobble {
    0%, 100% {
        transform: translateX(0);
    }
    15% {
        transform: translateX(-5px) rotate(-3deg);
    }
    30% {
        transform: translateX(5px) rotate(3deg);
    }
    45% {
        transform: translateX(-3px) rotate(-2deg);
    }
    60% {
        transform: translateX(3px) rotate(2deg);
    }
    75% {
        transform: translateX(-1px) rotate(-1deg);
    }
}
</style>